// src/pages/Home/UserManagement/UserList.jsx
import React, { useState } from 'react';
import { Table, Space, Button, Input, Select, Modal, Form, message } from 'antd';
import { SearchOutlined, PlusOutlined } from '@ant-design/icons';

const UserList = () => {
  const [users, setUsers] = useState([
    {
      id: 1,
      username: 'admin',
      name: '系统管理员',
      email: 'admin@example.com',
      department: '技术部',
      status: 'active'
    },
    {
      id: 2,
      username: 'user1',
      name: '普通用户',
      email: 'user1@example.com',
      department: '市场部',
      status: 'active'
    }
  ]);

  const [isModalOpen, setIsModalOpen] = useState(false);
  const [editingUser, setEditingUser] = useState(null);
  const [form] = Form.useForm();

  // 列定义
  const columns = [
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username',
      sorter: (a, b) => a.username.localeCompare(b.username),
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: '部门',
      dataIndex: 'department',
      key: 'department',
      filters: [
        { text: '技术部', value: 'tech' },
        { text: '市场部', value: 'marketing' },
      ],
      onFilter: (value, record) => record.department === value,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status) => (
        <span style={{ color: status === 'active' ? 'green' : 'red' }}>
          {status === 'active' ? '启用' : '禁用'}
        </span>
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button size="small" onClick={() => handleEdit(record)}>编辑</Button>
          <Button
            size="small"
            danger
            onClick={() => toggleUserStatus(record)}
          >
            {record.status === 'active' ? '禁用' : '启用'}
          </Button>
        </Space>
      ),
    },
  ];

  const handleEdit = (user) => {
    setEditingUser(user);
    form.setFieldsValue(user);
    setIsModalOpen(true);
  };

  const handleCreate = () => {
    setEditingUser(null);
    form.resetFields();
    setIsModalOpen(true);
  };

  const toggleUserStatus = (user) => {
    setUsers(users.map(u =>
      u.id === user.id ? { ...u, status: u.status === 'active' ? 'inactive' : 'active' } : u
    ));
    message.success('用户状态已更新');
  };

  const handleSave = () => {
    form.validateFields().then(values => {
      if (editingUser) {
        // 编辑用户
        setUsers(users.map(u =>
          u.id === editingUser.id ? { ...values, id: editingUser.id } : u
        ));
        message.success('用户信息已更新');
      } else {
        // 创建新用户
        const newUser = {
          ...values,
          id: users.length + 1,
          status: 'active'
        };
        setUsers([...users, newUser]);
        message.success('新用户已创建');
      }
      setIsModalOpen(false);
    });
  };

  return (
    <div>
      <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between' }}>
        <Input
          placeholder="搜索用户..."
          prefix={<SearchOutlined />}
          style={{ width: 300 }}
        />
        <Button type="primary" icon={<PlusOutlined />} onClick={handleCreate}>
          添加用户
        </Button>
      </div>

      <Table
        columns={columns}
        dataSource={users}
        rowKey="id"
        pagination={{ pageSize: 10 }}
      />

      {/* 添加/编辑用户模态框 */}
      <Modal
        title={editingUser ? "编辑用户" : "添加新用户"}
        open={isModalOpen}
        onOk={handleSave}
        onCancel={() => setIsModalOpen(false)}
      >
        <Form form={form} layout="vertical">
          <Form.Item
            name="username"
            label="用户名"
            rules={[{ required: true, message: '请输入用户名' }]}
          >
            <Input placeholder="输入用户名" />
          </Form.Item>

          <Form.Item
            name="name"
            label="姓名"
            rules={[{ required: true, message: '请输入姓名' }]}
          >
            <Input placeholder="输入姓名" />
          </Form.Item>

          <Form.Item
            name="email"
            label="邮箱"
            rules={[
              { required: true, message: '请输入邮箱' },
              { type: 'email', message: '请输入有效的邮箱地址' }
            ]}
          >
            <Input placeholder="输入邮箱" />
          </Form.Item>

          <Form.Item
            name="department"
            label="部门"
            rules={[{ required: true, message: '请选择部门' }]}
          >
            <Select placeholder="请选择部门">
              <Select.Option value="tech">技术部</Select.Option>
              <Select.Option value="marketing">市场部</Select.Option>
              <Select.Option value="hr">人事部</Select.Option>
              <Select.Option value="finance">财务部</Select.Option>
            </Select>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default UserList;
